<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/assets/ztree/css/metroStyle/metroStyle.css"/>
    <link rel="stylesheet" href="/assets/iziModal/css/iziModal.css"/>
</head>
<body>

<div class="am-g am-margin-top">
    <div class="am-u-sm-9">
        <button class="am-btn am-btn-secondary am-radius am-btn-xs" onclick="toAdd();">添加</button>
    </div>
    <div class="am-u-sm-3 am-text-right am-u-end">
        <div class="am-input-group am-input-group-sm">
            <input id="i_search" type="text" class="am-form-field am-input-sm" placeholder="输入终端编号"/>
            <span class="am-input-group-btn">
                            <button class="am-btn  am-btn-primary am-btn-sm am-icon-search" type="button" onclick="searchQuery();"></button>
                        </span>
        </div>
    </div>
</div>

<table width="100%" class="am-table am-table-striped am-table-bordered
            am-table-compact am-text-nowrap am-table-hover" id="table">
    <thead>
    <tr class="am-text-center">
        <td colspan="5">基本信息</td>
        <td colspan="2">属性信息</td>
        <td colspan="4">安装信息</td>
        <td rowspan="2"><span style="margin-top: 20px;">操作</span></td>
    </tr>
    <tr class="am-text-center">
        <td>序号</td>
        <td>设备编号</td>
        <td>厂商</td>
        <td>版本</td>
        <td>生产日期</td>
        <td>电量</td>
        <td>当前状态</td>
        <td>人员</td>
        <td>时间</td>
        <td>位置</td>
        <td>所属中继</td>

    </tr>
    </thead>
    <tbody class="am-text-center"></tbody>
</table>

<script src="/assets/iziModal/js/jquery-2.2.4.js"></script>
<script src="/assets/iziModal/js/iziModal.js"></script>
<script src="/assets/amazeui/js/amazeui.js"></script>
<script src="/assets/amazeui/js/amazeui.datatables.min.js"></script>
<script src="/assets/ztree/js/jquery.ztree.all.js"></script>
<script>
    var table;
    $(function(){
        loadTable();
    });

    function loadTable(){
        table = $("#table").DataTable({
            ordering: false,
            bLengthChange: false,
            ordering: false,
            bSort: false,
            serverSide: true,
            searching: false,
            iDisplayLength: 10,
            ajax: {
                url: "/sys/terminal/queryList",
                data: function (d) {
                    var key = $("#i_search").val();
                    if(key){
                        d.key = key;
                    }
                }
            },
            columns: [
                {data: "relayId"},
                {data: "deviceId"},
                {data: "vendor"},
                {data: "terminalVersion"},
                {data: "makerTime"},
                {data: "power"},
                {data: "state"},
                {data: "installPersion"},
                {data: "installTime"},
                {data: "location"},
                {data: "relayId"},
                {
                    data: 'op',
                    render: function (data,type,row,meta){
                        var btn;

                        btn = "<div>" +
                                "<button class='am-btn-xs am-btn am-radius am-btn-secondary'>修改</button> " +
                                "<button class='am-btn-xs am-btn am-radius am-btn-secondary'>重启</button> " +
                                "<button class='am-btn-xs am-btn am-radius am-btn-warning'>删除</button> " +
                                "</div>";
                        return btn;
                    }
                }
            ]
        });
    }
</script>
</body>
</html>